<template>
  <div id="onlyoffice"></div>
</template>
<script>
  export default {
    mounted() {
      this.fileDeal()
    },
    methods: {
      fileDeal() {
        let config
        // 判断时编辑还是预览
        config = this.editOfficeConfig()
        // config = this.viewOfficeConfig()
        new window.DocsAPI.DocEditor('onlyoffice', config)
      },
      editOfficeConfig() {
        let urlView = ''
        urlView = `http://172.27.177.63:9201/2025/07/17/2_河南联通电子云MPLS VPN测试方案V1.2_20250717004726A043.docx`
        let callbackUrl = ''
        callbackUrl =
          window.BASE_URL +
          `/gczd/detail/file/callback?fileId=${this.$route.query.id}`
        return {
          document: {
            mode: 'edit',
            fileType: 'docx',
            key: this.$route.query.id,
            title: '测试wordw文件.docx',
            url: urlView,
            permissions: {
              edit: true,
            },
          },
          documentType: 'word',
          editorConfig: {
            user: {
              name: '测试name',
              id: 'ce',
            },
            // 隐藏插件菜单
            customization: {
              plugins: false,
              forcesave: true,
            },
            lang: 'zh',
            callbackUrl: callbackUrl,
          },
          height: '100%',
          width: '100%',
        }
      },
      // 纯查看
      viewOfficeConfig() {
        let urlView = ''
        urlView =
          window.BASE_URL +
          `/gczd/fill/template/file/content?id=${this.$route.query.id}`
        return {
          document: {
            mode: 'view',
            fileType: 'docx',
            key: this.$route.query.id,
            title: '测试wordw文件.docx',
            url: urlView,
            permissions: {
              edit: false,
            },
          },
          documentType: 'word',
          editorConfig: {
            user: {
              name: this.$store.state.user.nickName,
              id: this.$store.state.user.userId,
            },
            customization: {
              plugins: false,
            },
            lang: 'zh',
          },
          height: '100%',
          width: '100%',
        }
      },
    },
  }
</script>

<style lang="less" scoped>
  #onlyoffice {
    width: 50vw;
    height: 50vh;
  }
  #file-info {
    position: fixed;
    top: 0px;
    z-index: 999;
  }
</style>
